<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web录音动画</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="webSound/recorder.js"></script>
    <link rel="stylesheet" href="microphone.css" />
    <script src="microphone.js"></script>
    <style>
        input[type=button] {
            background: #1AB5FF;
            color: #fff;
            border-radius: 6px;
            font-size: 12px;
            margin: 10px;
            border: none;
            padding: 8px 15px;
            cursor: pointer;
        }
        
        input[type=button]:hover {
            background: #0091ff;
        }
        
        div {
            height: 40px;
        }
    </style>
</head>

<body>
	<P>请打开您的麦克风才能看到效果</P>
	<h3>功能区</h3>
    <input type="button" value="开始录音" onclick="Start()" />
    <input type="button" value="结束录音" onclick="Stop()" />
    <div id="len" style="color:#ff6600;display:inline-block;">录音时长：0.00s</div>
    <div id="loud" style="color:#ff6600;display:inline-block;margin-left:15px;">录音时长：0%</div>
    <!-- <input type="button" value="播放音频" onclick="Play()" /> -->
    <!-- <div id="playTime"></div> -->
    <!-- <div id="playTiem"></div> -->
    <input type="button" value="下载音频" onclick="download()" />
	<h3>录音动画效果</h3>
	<div style="width:120px;height:120px;border:1px solid #000;padding:20px">
    <div id="Microphone">
    </div>
	</div>
</body>

</html>
<script>
    var recorder = new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1, // 声道，支持 1 或 2， 默认是1
        compiling: false, // 是否边录边转换，默认是false
    });

    function isIE() { //ie?
        if (!!window.ActiveXObject || "ActiveXObject" in window)
            return true;
        else
            return false;
    }
    var Start = function() {
        if (isIE()) {
            alert("ie不支持麦克风录音，请更换浏览器！");
        } else {
            recorder.start().then(() => {
                Length();
                //Loud();
                // 开始录音
            }, (error) => {
                // 出错了
                console.log(`${error.name} : ${error.message}`);
            });
        }
    }
    var Stop = function() {
        recorder.stop();
    }
    var Length = function() {
        recorder.onprogress = function(params) {
            var id = document.getElementById("len");
            id.innerHTML = "录音时长：" + params.duration.toFixed(2);
            var idx = document.getElementById("loud");
            idx.innerHTML = "音量大小：" + params.vol.toFixed(0) + "%";
            microphone.volume("Microphone", params.vol);
        }
    }
    var Play = function() {
        recorder.play();
        PlayDur();
    }
    var PlayDur = function() {
        var id = document.getElementById("playTiem");
        id.innerHTML = "音频总时长" + recorder.duration;

        setInterval(function() {
            var idx = document.getElementById("playTime");
            idx.innerHTML = "播放进度" + recorder.getPlayTime();
        }, 1000)

    }
    var download = function() {
        recorder.downloadWAV("video");
    }
</script>